<template>
    <div class="account-info">
        <c-wrap title="个人信息">
            <div>
                <mt-cell title="头像">
                    <img :src="avatarUrl" class="avatar" style="width: 36px;height: 36px;"/>
                </mt-cell>
                <mt-cell label="账号" :value="user.name"></mt-cell>
                <mt-field label="昵称" v-model="user.nickName"></mt-field>
                <mt-field label="邮箱" placeholder="admin@qdhlm.cn" v-model="user.email"></mt-field>
            </div>
            <mt-button type="primary" style="margin-top: 25px" @click="click">修改</mt-button>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'

    export default {
        components: {CWrap},
        data() {
            return {
                user: {
                    avatar: '',
                    name: '',
                    nickName: '',
                    email: ''
                }
            }
        },
        computed: {
            avatarUrl() {
                return this.user.avatar && ((this.user.avatar.startsWith("http://") ? '' : app.config.setting.serverAsset) + this.user.avatar);
            }
        },
        methods: {
            click() {
                let email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+[\.][a-zA-Z0-9_-]+$/,
                    plusLoading;
                if (this.user.email && !email.test(this.user.email)) {
                    this.$toast('请填写正确的邮箱');
                    return;
                }
                if (app.config.setting.platform === 'mobile') {
                    window.plus.nativeUI.showWaiting("等待中...");
                } else {
                    this.$indicator.open({
                        spinnerType: 'fading-circle'
                    });
                }
                app.ajax.put(app.config.api.account.user, {
                    avatar: this.user.avatar,
                    nickName: this.user.nickName,
                    email: this.user.email
                }, (res) => {
                    if (app.config.setting.platform === 'mobile') {
                        window.plus.nativeUI.closeWaiting();
                    } else {
                        this.$indicator.close();
                    }
                    this.$router.push({
                        name: 'index', params: {id: '我的'}
                    })
                })
            },
            loadData() {
                app.ajax.get(app.config.api.account.user, {}, (res) => {
                    Object.assign(this.user, res.data);
                });
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
<style>
    .account-info .mint-cell-label {
        font-size: 16px;
        color: #2c3e50;
    }

    .account-info .mint-cell-value {
        text-align: right;
        margin-right: 0 !important;

    }

    .account-info .mint-field-core {
        text-align: right;
    }

    .account-info .avatar-field .mint-field-other {
        right: 0px;
    }

    .account-info .avatar {
        width: 60px;
        height: 60px; /**border半径要是边长的一半，这样就能画出一个圆**/
        border-radius: 30px; /**设置边框**/
        border: solid #ffffff 2px; /**设置为flex布局，并且内部项目都居中显示**/
    }
</style>
